<template>
  <el-dialog :visible.sync="visible" custom-class="userDialog-wrapper" :before-close="handleClose">
    <el-form label-position="left" label-width="124px" ref="diaForm"
             :model="data">
      <el-row class="row_margin_bottom" :gutter="30">
        <el-col :span="12">
          <el-form-item label="车号：" prop="wagonNumber">
            <el-input size="small" v-model="data.wagonNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="垃圾来源：" prop="garbageSource">
            <el-input size="small" v-model="data.garbageSource"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row_margin_bottom" :gutter="30">
        <el-col :span="12">
          <el-form-item label="垃圾种类：" prop="garbageType">
            <el-input size="small" v-model="data.garbageType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数量（kg）：" prop="garbageNumber">
            <el-input size="small" v-model="data.garbageNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="row_margin_bottom" :gutter="30">
        <el-col :span="12">
          <el-form-item label="记录人：" prop="recordingPerson">
            <el-input size="small" v-model="data.recordingPerson"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注：" prop="remarks">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              resize="none"
              v-model="data.remarks">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="title" style="font-size: 20px">
      修改信息
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button class="el-green-button" @click="submitForm" type="primary">保存</el-button>
      <el-button class="el-red-button" @click="handleClose" type="info">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from '@/network/request'
export default {
  watch: {
    visibleFlag: function (newValue) {
      this.visible = newValue
    }
  },
  mounted () {
    this.visible = this.visibleFlag
  },
  data () {
    return {
      visible: false
    }
  },
  props: {
    visibleFlag: { type: Boolean, required: true },
    data: { type: Object, required: true }
  },
  methods: {
    handleClose () {
      this.$emit('close-dialog')
    },
    submitForm () {
      console.log(this.data)
      const params = {
        id: this.data.id,
        wagon_number: this.data.wagonNumber,
        garbage_source: this.data.garbageSource,
        garbage_type: this.data.garbageType,
        garbage_number: this.data.garbageNumber,
        recording_person: this.data.recordingPerson
      }
      if (this.data.remarks !== null) {
        params.remarks = this.data.remarks
      } else {
        params.remarks = ''
      }
      request({
        method: 'post',
        url: '/shlj/abnormolGarbage/update',
        params: params
      }).then((res) => {
        console.log(res)
        if (res.data.code === 200 && res.data.message === 'SUCCESS') {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
        } else if (res.data.message !== 'SUCCESS') {
          this.$message.error(res.data.message)
        } else if (res.data.code === 400) {
          this.$message.error(res.message)
        } else {
          this.$message.error('保存失败!')
        }
        this.handleClose()
      })
    }
  }
}
</script>

<style scoped>
</style>
